<template>
  <div id="demo">
    <h1>Lastes Vue.js Commits</h1>
    <template v-for="branch in branches">
      <input type="radio" :id="branch" :value="branch" name="branch" v-model="currentBranch">
      <label :for="branch">{{branch}}</label>
    </template>
    <p>vuejs/vue@{{currentBranch}}</p>
    <ul>
      <li v-for="record in commits">
        <a :href="record.html_url" target="_blank" class="commit">{{record.sha.slice(0,7)}}</a>
        - <span class="message">{{record.commit.message|truncate}}</span><br>
        by <span class="author"><a :href="record.author.html_url" target="_blank">{{record.commit.author.name}}</a></span>
        at <span class="date">{{record.commit.author.date|formatDate}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
var apiURL = 'https://api.github.com/repos/vuejs/vue/commits?per_page=3&page=0&sha='
export default {
  name: 'demo',
  data () {
    return {
      branches: ['master', 'dev'],
      currentBranch: 'master',
      commits: null
    }
  },
  created () {
    this.fetchData()
  },
  watch: {
    currentBranch: 'fetchData'
  },
  filters: {
    truncate (v) {
      let newline = v.indexOf('\n')
      return newline > 0 ? v.slice(0, newline) : v
    },
    formatDate (v) {
      return v.replace(/T|Z/g,' ')
    }
  },
  methods: {
    fetchData () {
      let xhr = new XMLHttpRequest()
      xhr.open('GET',apiURL + this.currentBranch)
      xhr.onload = () => {
        this.commits = JSON.parse(xhr.responseText)
      }
      xhr.send()

    }
  }
}
</script>

<style>
#demo {
  font-family: 'Helvetica', Arial, sans-serif;

}

a {
  text-decoration: none;
  color: #F66;
}

li {
  line-height: 1.5em;
  margin-bottom: 20px;
}

.author, .date {
  font-weight: bold;
}
</style>
